<div class="dataTable">
  <div class="table-buttons">
    <div class="table-buttons-left">
      
      <!-- <div class="operate" (click)="addOrEdit('add')" *ngIf="accessButton?.Create"><i
          class="iconfont icon-add"></i>{{'TrafficManagement.ScheduledEvent.Create' | translate}}</div>
      <div class="operate" (click)="addOrEdit('edit')" *ngIf="accessButton?.Edit"><i
          class="iconfont icon-pen01"></i>{{'TrafficManagement.ScheduledEvent.Edit' | translate}}</div>
      <div class="operate" (click)="delete()" *ngIf="accessButton?.Delete"><i
          class="iconfont icon-fork"></i>{{'TrafficManagement.ScheduledEvent.Delete' | translate}}</div>
      <div class="left-button-last" (click)="refresh()"><i class="iconfont icon-refresh1"></i></div> -->

      <button class="op-btn" nz-button nzType="primary" (click)="addOrEdit('add')" *ngIf="accessButton?.Create">
        <!-- <i nz-icon nzType="plus" nzTheme="outline"></i> -->
        <svg t="1649734574121" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4498" width="20" height="20"><path d="M512 958.016611c-119.648434 0-232.1288-46.367961-316.736783-130.559656-84.640667-84.255342-131.263217-196.255772-131.263217-315.455235 0-119.168499 46.624271-231.199892 131.232254-315.424271 84.607983-84.191695 197.088348-130.559656 316.736783-130.559656s232.1288 46.367961 316.704099 130.559656c84.67163 84.224378 131.263217 196.255772 131.263217 315.391587 0.032684 119.199462-46.591587 231.232576-131.263217 315.455235C744.1288 911.615966 631.648434 958.016611 512 958.016611zM512 129.983389c-102.623626 0-199.071738 39.743475-271.583282 111.936783-72.480581 72.12794-112.416718 168.063432-112.416718 270.079828s39.903454 197.951888 112.384034 270.047144c72.511544 72.191587 168.959656 111.936783 271.583282 111.936783 102.592662 0 199.071738-39.743475 271.583282-111.936783 72.480581-72.160624 112.416718-168.063432 112.384034-270.079828 0-102.016396-39.903454-197.919204-112.384034-270.016181C711.071738 169.759548 614.592662 129.983389 512 129.983389z" p-id="4499" fill="#ffffff"></path><path d="M736.00086 480.00086 544.00086 480.00086 544.00086 288.00086c0-17.664722-14.336138-32.00086-32.00086-32.00086s-32.00086 14.336138-32.00086 32.00086l0 192L288.00086 480.00086c-17.664722 0-32.00086 14.336138-32.00086 32.00086s14.336138 32.00086 32.00086 32.00086l192 0 0 192c0 17.695686 14.336138 32.00086 32.00086 32.00086s32.00086-14.303454 32.00086-32.00086L544.00258 544.00086l192 0c17.695686 0 32.00086-14.336138 32.00086-32.00086S753.696546 480.00086 736.00086 480.00086z" p-id="4500" fill="#ffffff"></path></svg>
        {{'TrafficManagement.ScheduledEvent.Create' | translate}}
      </button>

      <button class="op-btn" nz-button nzType="primary" (click)="addOrEdit('edit')" *ngIf="accessButton?.Edit">
        <!-- <i nz-icon nzType="edit" nzTheme="outline"></i> -->
        <svg t="1649741351323" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5424" width="20" height="20"><path d="M521.152 393.408l319.936-320 45.248 45.312-320 320z" fill="#ffffff" p-id="5425"></path><path d="M896 960H64V64h448v64H128v768h704V448h64v512z" fill="#ffffff" p-id="5426"></path></svg>

        {{'TrafficManagement.ScheduledEvent.Edit' | translate}}
      </button>

      <button class="op-btn" nz-button nzType="danger" (click)="delete()" *ngIf="accessButton?.Delete">
        <!-- <i nz-icon nzType="delete" nzTheme="outline"></i> -->
        <svg t="1649741442766" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5702" width="20" height="20"><path d="M256 256h554.666667v640H256V256z m42.666667 42.666667v554.666666h469.333333V298.666667H298.666667z m128 128h42.666666v298.666666h-42.666666v-298.666666z m170.666666 0h42.666667v298.666666h-42.666667v-298.666666zM213.333333 256h640v42.666667H213.333333V256z m213.333334-85.333333h213.333333v42.666666h-213.333333V170.666667z" fill="#ffffff" p-id="5703"></path></svg>
        {{'TrafficManagement.ScheduledEvent.Delete' | translate}}
      </button>
      <button nz-button nzType="primary" (click)="refresh()" nzShape="circle"><i nz-icon nzType="reload" nzTheme="outline"></i></button>
    </div>
    <div class="table-buttons-right">
      <itmp-toolbar 
      [accessButton]='accessButton'
      [toolbarList]="toolbarList" 
      [selectData]="selectedItem" 
      eventType="incident-position" 
      exportName="scheduledEvent"
      [searchData]="queryData?.condition"
      ></itmp-toolbar>
    </div>
  </div>
  <nz-table id="nzTable" #basicTable [nzShowPagination]="false" [nzData]="listOfData" [nzFrontPagination]="false">
    <thead *ngIf="showTable">
      <tr class="dataTitle">
        <th *ngFor="let item of renderHeader" class="listTitle">
          <div>{{'TrafficManagement.ScheduledEvent.' + item.name | translate}}</div>
          <div class="switch no-print" *ngIf="item.name==='Event ID'">
            <input style="width: 2rem" nz-input placeholder="" [(ngModel)]="id" (ngModelChange)="idSearch()" />
          </div>
          <div class="switch no-print" *ngIf="item.name==='Zone ID'">
            <input style="width: 1rem" nz-input placeholder="" [(ngModel)]="zoneId" (ngModelChange)="zoneSearch()" />
          </div>
          <div class="switch no-print" *ngIf="item.name==='Road Name'">
            <input style="width: 2rem" nz-input placeholder="" [(ngModel)]="roadName"
              (ngModelChange)="filterSearch()" />
          </div>
          <div class="switch no-print" *ngIf="item.name==='Event Type'">
            <nz-select nzPlaceHolder="" style="width: 1.2rem" nzAllowClear [(ngModel)]="typeSelect"  [nzDropdownMatchSelectWidth]="false"
              (ngModelChange)='typeSearch()' [nzPlaceHolder]="'Share.All' | translate" nzShowSearch nzAllowClear>
              <nz-option *ngFor="let option of eventData" [nzValue]="option.value" [nzLabel]="'TrafficManagement.ScheduledEvent.'+option.name|translate">
              </nz-option>
            </nz-select>
          </div>
          <div class="switch no-print" *ngIf="item.name==='Planned Start Date'">
            <nz-range-picker style="width: 2rem" nzSize="default" [(ngModel)]="dateRange"
            (ngModelChange)="onChange($event)"></nz-range-picker>
          </div>
          <div class="switch no-print" *ngIf="item.name==='Planned End Date'">
            <nz-range-picker style="width: 2rem" nzSize="default" [(ngModel)]="dateUpRange"
            (ngModelChange)="onUpdateChange($event)"></nz-range-picker>
          </div>
          <div class="switch no-print" *ngIf="item.name==='Status'">
            <nz-select nzPlaceHolder="" style="width: 1rem" nzAllowClear [(ngModel)]="statusSelect"  [nzDropdownMatchSelectWidth]="false"
              (ngModelChange)='statusSearch()' [nzPlaceHolder]="'Share.All' | translate" nzShowSearch nzAllowClear>
              <nz-option *ngFor="let option of statusData" [nzValue]="option.value" [nzLabel]="'TrafficManagement.ScheduledEvent.'+option.name|translate">
              </nz-option>
            </nz-select>
          </div>
          <div class="switch no-print" *ngIf="item.name==='LaneBlockage'">
            <div style="width: 1rem;height: 0.32rem"></div>
          </div>
          <!-- <div class="switch no-print" *ngIf="item.name==='Name'">
            <input nz-input placeholder="" [(ngModel)]="queryName" (ngModelChange)="filterSearch()" />
          </div>
          <div class="switch" *ngIf="item.name==='Password'">
            <div style="width: 2.15rem;height: 0.32rem"></div>
          </div>
          <div class="switch" *ngIf="item.name==='Role'">
            <nz-select nzPlaceHolder="All" style="width: 2rem" nzAllowClear  [(ngModel)]="roleSelect" (ngModelChange)='selectSearch()'>
              <nz-option *ngFor="let option of roleOptions" [nzValue]="option.userRole_Id" [nzLabel]="option.roleName">
              </nz-option>
            </nz-select>
          </div>
          <div class="switch" *ngIf="item.name==='CreateDate'">
              <nz-range-picker nzSize="default" [(ngModel)]="dateRange" (ngModelChange)="onChange($event)"></nz-range-picker>
          </div>
          <div class="switch" *ngIf="item.name==='UpdateDate'">
              <nz-range-picker nzSize="default" [(ngModel)]="dateUpRange" (ngModelChange)="onUpdateChange($event)"></nz-range-picker>
          </div>
          <div class="switch" *ngIf="item.name==='Organization'">
              <nz-select nzPlaceHolder="All" style="width: 2rem" nzAllowClear  [(ngModel)]="orgSelect" (ngModelChange)='orgSearch()'>
                  <nz-option *ngFor="let option of listOfOption" [nzValue]="option.organization_Id" [nzLabel]="option.organization_Name">
                  </nz-option>
              </nz-select>
          </div> -->
        </th>
      </tr>
    </thead>
    <tbody class="dataList" *ngIf="showTable">
      <tr *ngFor="let data of basicTable.data;index as i" (click)="showDetail(data)"
        [ngClass]="{'active':data.eventId == editingItem}">
        <td>{{ data.eventId }}</td>
        <td>{{ 'TrafficManagement.ScheduledEvent.'+typeList[data.type]|translate }}</td>
        <td>{{ data.zone_ID }}</td>
        <td>{{ data.road_Name }}</td>
        <td>{{ data.planStartTime | date:'yyyy/MM/dd HH:mm' }}</td>
        <td>{{ data.planEndTime ? (data.planEndTime | date:'yyyy/MM/dd HH:mm') : '-' }}</td>
        <td>
          <span *ngFor="let data of data.laneBlockage">
            <img class="img-lane" [src]="'../content/images/icons/' + lane_blockages[data]" style="width: 20px;">
          </span>
        </td>
        <td>
            {{ statusList[data.veri_State] ? ('TrafficManagement.ScheduledEvent.'+statusList[data.veri_State] |translate) : '-'}}
        </td>
      </tr>
    </tbody>
    <tfoot class="pagination Planned-event-list">
      <tr>
        <td [attr.colspan]="renderHeader.length+1" style="padding: 10px;">
          <itmp-pagination [totalEle]="pagination.totalEle" [pageSize]="pagination.pageSize"
            [pageNum]="pagination.currentPage" showCountInfo=true [count]="pagination.currentSize"
            (pageNumChange)="onPageChange($event)" (pageSizeChange)="onSizeChange($event)"></itmp-pagination>
        </td>
      </tr>
    </tfoot>
  </nz-table>
</div>

<nz-modal [(nzVisible)]="isForceCancelVisible"
          nzTitle="{{'TrafficManagement.IncidentRecord.Cross region operation' | translate}}"
          (nzOnCancel)="isForceCancelVisible=false" (nzOnOk)="confirmDelete(true)">
    <div>
        {{'TrafficManagement.IncidentRecord.Further operation, mandatory operation still available' | translate}}
    </div>
</nz-modal>
